<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="empty-box flexWarpCenterColumn" v-if="couponList.length==0">
					<image src="../../static/coupon/empty.png" class="empty-image"></image>
					<view class="empty-tips">这里空空如也！</view>
				</view>
				<view class="coupon-box">
					<view class="tips">长按可删除优惠券</view>
					<view class="coupon-item" @longpress="showDelete(index)" v-for="(item,index) in couponList" :key='index'>
						<view class="coupon flexWrapNo">
							<view class="left-circular"></view>
							<view class="coupon-left flexWrapNo">
								<text class="money">{{item.price}}</text>
								<text class="money-tip">元</text>
							</view>
							<view class="coupon-line"></view>
							<view class="coupon-right flexWarpColumn">
								<text class="coupon-name">{{item.title}}</text>
								<text v-if="item.valid_timedata==1">有效期：永久</text>
								<text v-if="item.valid_timedata==2">有效期：{{item.start}} 至 {{item.end}}</text>
								<text v-if="item.valid_timedata==3">有效期：{{item.valid_configure}}天</text>
							</view>
							<view class="right-circular"></view>
						</view>
						<view class="coupon-info-box">
							<view class="coupon-data flexWrapNo">
								<view class="data-item right-line flexWarpCenterColumn">
									<text>{{item.num}}</text>
									<text class="date-title">总数</text>
								</view>
								<view class="data-item right-line flexWarpCenterColumn">
									<text>{{item.remaining_quantity}}</text>
									<text class="date-title">剩余</text>
								</view>
								<view class="data-item right-line flexWarpCenterColumn">
									<text>{{item.presented}}</text>
									<text class="date-title">已赠送</text>
								</view>
								<view class="data-item flexWarpCenterColumn">
									<text>{{item.used}}</text>
									<text class="date-title">已使用</text>
								</view>
							</view>
							<view class="btn-box flexWrap">
								<view @tap="goPage('/pages/manage/editCoupon?couponId='+item.id)">编辑</view>
								<view @tap="goPage('/pages/manage/couponDetail?couponId='+item.id)">明细</view>
								<view @tap="showModel(item)">分享</view>
								<view @tap="goSendCoupon(item)">{{isSelect==1?"选择":'发放'}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="add-btn" @tap="goPage('/pages/manage/editCoupon')">新建优惠券</view>
				<view class="model-box" v-if="modelFlag">
					<view class="model-title">优惠券分享设置</view>
					<view class="model-cont">
						<view class="model-item flexWrapNo">
							活动名称：
							<view class="input-box">
								<input placeholder="请输入名称" placeholder-class="placeClass" v-model="title" maxlength="8"/>
							</view>
						</view>
						<view class="model-item flexWrapNo">
							每人领取：
							<view class="input-box">
								<input placeholder="输入数量" placeholder-class="placeClass" type="number" v-model="coupon_num"/>
							</view>
							张
						</view>
						<view class="model-item flexWrapNo">
							领取人数：
							<view class="input-box">
								<input placeholder="请输入人数" placeholder-class="placeClass" type="number" v-model="peopel_num"/>
							</view>
						</view>
						<view class="btn-box flexWrap">
							<view @tap="closeModel()">取消</view>
							<view class="button" @tap="setShare()">生成链接</view>
						</view>
					</view>
				</view>
				<view class="mask-wrap" v-if="modelFlag"></view>
				
				<!--操作指引悬浮按钮 -->
				<guideline :path="'pages/manage/couponList'"></guideline>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				couponList:[],
				isSelect:0,
				modelFlag:false,
				coupon_id:"",
				coupon_num:"",
				peopel_num:"",
				coupon_share_id:"",
				title:""
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		onShow() {
			this.getCouponlist();
		},
		onLoad(ops) {
			this.isSelect=ops.isSelect||0
		},
		methods: {
			showDelete(index){
				uni.showModal({
					title:"是否确定删除该优惠券?",
					success: (res) => {
						if(res.confirm){
							this.$request.post(this.$api.deleteCoupon, {
								coupon_id:this.couponList[index].id,
								store_id:uni.getStorageSync('store_id')
							}, {
								token:true
							}).then(res => {
								if (res.code==1) {
									this.couponList.splice(index,1)
									this.$tools.showToast('删除成功')
								}
							})
						}
					}
				})
			},
			// 获取优惠券列表
			getCouponlist(){
				this.$request.post(this.$api.couponList, {
					store_id:uni.getStorageSync('store_id'),
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						for (let i in data) {
							if(data[i].valid_timedata==2){
								data[i].valid_configure = data[i].valid_configure.replace(/-/g,"/");
								let customTimeArr=data[i].valid_configure.split(' / ')
								let start=customTimeArr[0]
								let end=customTimeArr[1]
								data[i].start=this.$tools.formatDay(start)
								data[i].end=this.$tools.formatDay(end)
							}
						}
						this.couponList=data
						// console.log(this.couponList)
					}
				})
			},
			goSendCoupon(item){
				if(this.isSelect==0){
					uni.navigateTo({
						url:'/pages/manage/sendCoupon?couponId='+item.id
					})
				}else{
					let pages = getCurrentPages(); //当前页
					let beforePage = pages[pages.length - 2]; //上个页面
					beforePage.$vm.couponId = item.id
					beforePage.$vm.getCouponInfo()
					uni.navigateBack({
						delta:1
					})
				}
			},
			showModel(item){
				this.modelFlag=true
				this.coupon_id=item.id
			},
			closeModel(){
				this.modelFlag=false
			},
			setShare(){
				this.$request.post(this.$api.shareadd, {
					store_id:uni.getStorageSync('store_id'),
					coupon_id:this.coupon_id,
					coupon_num:this.coupon_num,
					peopel_num:this.peopel_num,
					title:this.title
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.coupon_share_id=data.coupon_share_id
						uni.navigateTo({
							url:'/pages/manage/jumpLink?coupon_share_id='+this.coupon_share_id
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 100upx;
	}
	button {
		margin: 0;
		padding: 0;
		background: #fff;
		line-height: unset;
	
		&:after {
			border: 0;
		}
	}
	.content{
		padding: 0 36upx;
	}
	.coupon-box{
		padding-top: 20upx;
		.tips{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #FFFFFF;
			text-align: center;
			margin-bottom: 20upx;
		}
		.coupon-item{
			margin-bottom: 20upx;
			.coupon{
				height: 140upx;
				background:#FFF5C9;
				border-radius: 20upx 20upx 0 0;
				position: relative;
				border-bottom: 1rpx solid #040336;
				.left-circular{
					width: 30upx;
					height: 30upx;
					border-radius: 50%;
					background: #040336;
					position: absolute;
					left: -15upx;
					bottom: 0;
					bottom:-15rpx;
				}
				.right-circular{
					width: 30upx;
					height: 30upx;
					border-radius: 50%;
					background: #040336;
					position: absolute;
					right: -15upx;
					bottom:-15rpx;
				}
				.coupon-left{
					width: 224upx;
					align-items: baseline;
					justify-content: center;
					.money{
						font-size: 52upx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 100upx;
						color: #000000;
					}
					.money-tip{
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #000000;
						margin-left: 20rpx;
					}
				}
				.coupon-line{
					width: 2upx;
					height: 110upx;
					background: #040336;
				}
				.coupon-right{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 44upx;
					color: #000000;
					margin-left: 32upx;
					.coupon-name{
						font-size: 36upx;
						font-family: PingFang SC;
						font-weight: 600;
						line-height: 50upx;
						color: #000000;
					}
				}
			}
			.coupon-info-box{
				background:#FFF5C9;
				padding-top: 10rpx;
				border-radius:0 0 20upx 20upx;
				.coupon-data{
					.data-item{
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						padding: 10rpx 0;
						width: 25%;
						.date-title{
							font-size:24rpx;
							color: #000000;
							margin-top: 8rpx;
						}
					}
				}
				.btn-box{
					padding: 20rpx 30rpx;
					view{
						width: 130rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						font-size: 30rpx;
						font-family: PingFang;
						font-weight: 500;
						border-radius: 20rpx;
						background:#FD8926;
						color: #FFFFFF;
						border: none;
						border: 2rpx solid #DB5D00;
					}
				}
			}
		}
	}
	.empty-box{
		width: auto !important;
		height: auto !important;
		margin-bottom: 64upx;
		.empty-image{
			width: 400upx !important;
			height: 400upx !important;
		}
		.empty-tips{
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #FFFFFF;
		}
	}
	.add-btn{
		height: 120upx;
		line-height: 120upx;
		background:#1D1C5C;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	.model-box{
		width: 700rpx;
		height: 638rpx;
		background: #1A195F;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 999;
		.model-title{
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 50upx;
			text-align: center;
		}
		.model-cont{
			padding: 0 42upx;
			margin-top: 44upx;
			.model-item{
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				align-items: center;
				margin-bottom: 30upx;
			}
			.btn-box{
				margin-top: 50upx;
				view,.button{
					width: 282rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 2rpx solid #26BCFD;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #26BCFD;
				}
				.button{
					color: #FFFFFF;
					background-color: #26BCFD;
				}
			}
		}
		
	}
	.input-box{
		height: 84upx;
		width: 420upx;
		background:#312F80;
		border-radius: 16upx;
		margin-right: 14upx;
		input{
			width: 420upx;
			height:84upx;
			line-height: 84upx;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			color:rgba(255,255,255,.5);
			padding-left: 24upx;
		}
		.placeClass{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			color:#FFE577;
		}
	}
</style>
